<extend name='Public/demo' />
<block name='contents'>
    <!-- Modal -->
    <div class="modal fade" id="addPhotosModal" tabindex="-1" role="dialog" aria-labelledby="addPhotosModalLabel">
        <div class="modal-dialog" role="document" style="width:650px">
            <div class="modal-body">
                <div id="demo" class="demo"></div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="photosModel" tabindex="-1" role="dialog" aria-labelledby="photosModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="photosModelLabel">编辑照片信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">照片名:</label>
                            <input type="text" class="form-control" id="photos-name" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">照片描述:</label>
                            <textarea class="form-control" id="photos-info" rows="8" cols="40" maxlength="200"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="photos-ok">完成</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
    <?php if($curUserId == $_SESSION['home']['uid']){ ?>
        <div class="col-xs-12 col-md-12">
            <button type="button" class="btn-addPhotos btn btn-success" data-toggle="modal" data-target="#addPhotosModal">添加照片</button>
            <hr>
        </div>
    <?php } ?>
        <style>
            .photo {
                width: 100%;
                height: 200px;
                overflow: hidden;
                background-size: cover;
                transition: all 1s;
            }
            .photo:hover {
                transform: scale(1.05);
            }
        </style>
        <if condition="count($photosList) gt 0">
            <foreach name="photosList" item="value">
                <div class="col-sm-6 col-md-3" style="margin-bottom:30px;">
                    <div class="thumbnail" style="overflow:hidden;padding:0px;">
                        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="__PUBLIC__{$value.photos_path}">
                            <div class="photo" style="background-image:url('__PUBLIC__{$value.photos_path}');"></div>
                        </a>
                        <div class="caption">
                            <h5><b class="photos-name">{$value.photos_name}</b></h5>
                            <p class="photos-info">{$value.photos_info}</p>
                            <p>
                                <a href="javascript:void(0);" class="btn btn-sm btn-info btn-look" <if condition="$Think.get.photo_id eq $value['photos_id']">id="showPhoto"</if>>查看</a>
                            <?php if($curUserId == $_SESSION['home']['uid']){ ?>
                                <a href="#" class="btn btn-sm btn-success btn-edit" photos-id="{$value.photos_id}"  data-toggle="modal" data-target="#photosModel">编辑</a>
                                <a href="javascript:void(0);" class="btn btn-sm btn-danger btn-del" photos-id="{$value.photos_id}">删除</a>
                            <?php } ?>
                                <a href="javascript:void(0);" class="btn btn-sm btn-primary btn-zan" photos-id="{$value.photos_id}"><i class="glyphicon glyphicon-heart"></i> <span>{$value.photos_zan}</span></a>
                            </p>
                        </div>
                    </div>
                </div>
            </foreach>
            <else/>
            <div class="col-sm-12 col-md-12">
                没有更多照片了
            </div>
        </if>
    </div>

    <!-- 引用控制层插件样式 -->
    <link rel="stylesheet" href="__PUBLIC__/ImageUpload/control/css/zyUpload.css" type="text/css">
    <!-- 引用核心层插件 -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/core/zyFile.js"></script>
    <!-- 引用控制层插件 -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/control/js/zyUpload.js"></script>

    <!-- fancyBox -->
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/fancyBox/source/jquery.fancybox.js?v=2.1.3"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ImageUpload/fancyBox/source/jquery.fancybox.css?v=2.1.2" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ImageUpload/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ImageUpload/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/fancyBox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>


    <script type="text/javascript">
        var albums_id = {$Think.get.id};
        $(function() {

            $('.btn-del').click(function() {
                var id=$(this).attr('photos-id');
                var obj=$(this);
                $.get("{:U('Home/Image/imagedeldo')}",{id:id},function(data){
                    if(data.status==1){
                        obj.parents('.thumbnail').parent().fadeOut();
                        setTimeout(function(){
                            obj.parents('.thumbnail').parent().remove();
                        },500);
                    }else{
                        alert('删除失败！');
                    }
                })
                return false;
            });
            $('.btn-look').click(function() {
                $(this).parents('.thumbnail').find('.fancybox-thumbs').trigger('click');
                return false;
            });
            //图片赞
            $('.btn-zan').click(function(){
                var photos_id=$(this).attr('photos-id');
                var num=$(this).find('span').html();
                $(this).find('span').html(num*1+1);
                $.get("{:U('Home/Image/photoszan')}",{id:photos_id},function(){});
            })

            var photosCurId; //当前按钮所属照片id
            var photosCurTr;
            //编辑
            $('.btn-edit').click(function(){
                photosCurId=$(this).attr('photos-id');
                photosCurTr = $(this).parents('.thumbnail');
                $('#photos-name').val(photosCurTr.find('.photos-name').html());
                $('#photos-info').val(photosCurTr.find('.photos-info').html());
            })
            //保存
            $('#photos-ok').click(function(){
                var name=$('#photos-name').val();
                var info=$('#photos-info').val();
                $.get("{:U('Home/Image/photoseditdo')}",{id:photosCurId,name:name,info:info},function(data){
                    if(data.status==1){
                        photosCurTr.find('.photos-name').html(name);
                        photosCurTr.find('.photos-info').html(info);
                        $('#photosModel').modal('hide');
                    }else{
                        alert('保存失败！');
                    }
                },'JSON')
            })

            // 初始化插件
            $("#demo").zyUpload({
                width: "", // 宽度
                height: "", // 宽度
                itemWidth: "120px", // 文件项的宽度
                itemHeight: "100px", // 文件项的高度
                //url              :   "/upload/UploadAction",  // 上传文件的路径
                url: "{:U('Home/Image/imageadddo')}",
                multiple: true, // 是否可以多个文件上传
                dragDrop: true, // 是否可以拖动上传文件
                del: true, // 是否可以删除文件
                finishDel: false, // 是否在上传文件完成后删除预览
                /* 外部获得的回调接口 */
                onSelect: function(selectFiles, allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                    console.info("当前选择了以下文件：");
                    console.info(selectFiles);
                },
                onProgress: function(file, loaded, total) { // 正在上传的进度的回调方法
                    console.info("当前正在上传此文件：");
                    console.info(file.name);
                    console.info("进度等信息如下：");
                    console.info(loaded);
                    console.info(total);
                },
                onDelete: function(file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                    console.info("当前删除了此文件：");
                    console.info(file.name);
                },
                onSuccess: function(file, response) { // 文件上传成功的回调方法
                    console.info("此文件上传成功：");
                    console.info(file.name);
                },
                onFailure: function(file, response) { // 文件上传失败的回调方法
                    console.info("此文件上传失败：");
                    console.info(file.name);
                },
                onComplete: function(response) { // 上传完成的回调方法
                    // console.info("文件上传完成");
                    // console.info(response);
                    $('#addPhotosModal').modal('hide');
                    window.location.reload();
                }
            });

            //fancyBox

            /*
             *  Simple image gallery. Uses default settings
             */

            $('.fancybox').fancybox();

            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */

            $('.fancybox-thumbs').fancybox({
                prevEffect: 'none',
                nextEffect: 'none',

                closeBtn: false,
                arrows: false,
                nextClick: true,

                helpers: {
                    thumbs: {
                        width: 50,
                        height: 50
                    }
                }
            });

            //自动触发photo_id的图片
            $('#showPhoto').trigger('click');
        });
    </script>
</block>
